<template>
	<view class="activityInfo">
		<view v-if="info.message && info.message.user" class="notice">
			<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon20.png" mode="scaleToFill">
			</image>
			<u-notice-bar :text="`${info.message.user.nickname}送出了${info.message.send_flower}朵鲜花`"
				bgColor="rgba(255,255,255,0.00);" color="#333333" fontSize="28rpx" style="flex: 1;"></u-notice-bar>
		</view>
		<image class="banner" :src="info.img" mode="widthFix"></image>
		<view class="main">
			<view class="title">{{ info.title }}</view>
			<view class="data">
				<view class="item"><text>{{ info.work_num | million}}</text>总作品数</view>
				<view class="item"><text>{{ info.flower_count | million}}</text>总鲜花数</view>
				<view class="item"><text>{{ info.user_count | million}}</text>参赛人数</view>
			</view>
			<view v-if="info.reward_type == 1" class="info">
				<view class="item">任务奖励：根据视频表现持续瓜分<text style="color: #ff504a;">现金</text>，先到先得!</view>
				<!-- <view class="item">该任务参与人数上限：40000</view> -->
				<view class="item">开始时间：{{info.startTime}}</view>
				<view class="item">结束时间：{{ info.endTime }}</view>
				<view class="item">当前任务总奖励：<text style="color: #FF504A;">￥{{ info.activity_reward }}</text>
				</view>
				<view class="item">当前任务获最高收益：<text
						style="color: #FF504A;">￥{{ (info.activity_reward * info.activity_high_reward / 100).toFixed(2) }}</text>
				</view>
				<!-- <view class="item" style="display: flex;
					align-items: center;
					flex-wrap: wrap;margin-bottom: 0;">
					<view class="left">
						奖金已刮分
						<text
							style="color: #FF504A;margin-left: 6rpx;">{{ `${(1-Number(info.activity_remain_reward || 0)/Number(info.activity_reward || 0))*100}` }}%</text>
					</view>
					<view class="right">
						<view class="line"
							:style="{width: `${(1-Number(info.activity_remain_reward || 0)/Number(info.activity_reward || 0))*100}%`}">
						</view>
					</view>
				</view> -->
			</view>
			<view v-if="info.reward_type == 2" class="info">
				<view class="item">任务奖励：根据作品排名进行<text style="color: #ff504a;">实物奖励</text>，火爆进行中!</view>
				<!-- <view class="item">该任务参与人数上限：40000</view> -->
				<view class="item">开始时间：{{info.startTime}}</view>
				<view class="item">结束时间：{{ info.endTime }}</view>
				<view class="reward_rank">
					<view v-for="(v,i) in info.reward_rank_json" :key="i" class="value">
						<view>NO.{{v.rank}}:</view>
						<view style="padding: 10rpx;">奖<text style="color: #ff504a;">{{v.reward}}</text></view>
						<view>*{{v.num}}</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box-title">活动玩法</view>
				<view class="content">
					<view class="name">【活动介绍】</view>
					<view class="text" v-html="info.desc"></view>
				</view>
				<view class="content">
					<view class="name">【规则说明】</view>
					<view class="text" v-html="info.rule_desc"></view>
				</view>
				<view class="content">
					<view class="name">【平台声明】</view>
					<view class="text" v-html="info.platform_desc"></view>
				</view>
				<view class="box-title1">
					<view>活动挑战排名</view><text>{{info.updated_at}}</text>
				</view>

				<view class="bottomLIst">
					<view class="nav">
						<view :class="['item',type == 1?'xz':'']" @click="cut(1)">
							鲜花榜
							<text></text>
						</view>
						<view :class="['item',type == 2?'xz':'']" @click="cut(2)">
							送花榜
							<text></text>
						</view>
						<view :class="['item',type == 3?'xz':'']" @click="cut(3)">
							作品榜
							<text></text>
						</view>
					</view>
					<view v-if="type == 1" class="videoList">
						<view class="item" v-for="(v,i) in List" :key="i" @click="goTo(v)">
							<image class="picture" :src="v.image" mode="aspectFill"></image>
							<view class="msg">
								<view class="left">
									<image :src="v.user.avatar" mode="scaleToFill"></image>
									<text class="u-line-1">{{v.user.nickname}}</text>
								</view>
								<view class="right">
									<image v-if="true"
										src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerT.png"
										mode="scaleToFill"></image>
									<image v-else
										src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerF.png"
										mode="scaleToFill"></image>
									<text>{{v.flower_num}}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="type == 2" class="userList">
						<view :class="['item',i + 1 == 1 ? 'one': i + 1 == 2 ? 'two' : i + 1 == 3 ? 'three' : '']"
							v-for="(v,i) in List" :key="i" @click="navigateTo(`/pages/index/space?id=${v.user_id}`)">
							<view class="left">
								<view class="index">{{ (i + 1) > 99 ? "99+" : (i + 1) }}</view>
								<view v-if="v.user" class="user">
									<image :src="v.user.avatar" mode="scaleToFill"></image>
									<text class="u-line-1">{{v.user.nickname}}</text>
								</view>
							</view>
							<view class="hua">
								<image
									src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerT1.png"
									mode="scaleToFill"></image>
								<text>{{v.total_flowers | million}}</text>
							</view>
						</view>
					</view>
					<view v-if="type == 3" class="userList">
						<view :class="['item',i + 1 == 1 ? 'one': i + 1 == 2 ? 'two' : i + 1 == 3 ? 'three' : '']"
							v-for="(v,i) in List" :key="i" @click="navigateTo(`/pages/index/space?id=${v.user_id}`)">
							<view class="left">
								<view class="index">{{ (i + 1) > 99 ? "99+" : (i + 1) }}</view>
								<view v-if="v.user" class="user">
									<image :src="v.user.avatar" mode="scaleToFill"></image>
									<text style="width: 300rpx;" class="u-line-1">{{v.user.nickname}}</text>
								</view>
							</view>
							<view class="hua">
								<text style="width: 88rpx;">作品数</text>
								<text style="width: 60rpx;">{{v.work_count | million}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="[!isTimeUp ? 'activityBtn' : 'activityBtn2']" @click="goPage"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 1,
				id: null,
				info: {},
				isTimeUp: false, // 是否到达结束时间
				type: 1,
				page: 1,
				List: [],
				total: 0,
				retrench: false,
				tis: "",
			}
		},
		filters: {
			million(value) { //过万处理
				let num;
				if (value > 9999) { //大于9999显示x.xx万
					num = (Math.floor(value / 1000) / 10) + 'w+';
				} else if (value < 9999 && value >= 0) {
					num = value
				}
				return num;
			},
		},
		onShow() {
			if (this.id) {
				this.activityInfo(this.id)
			}
		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id;
			this.activityInfo(options.id)
			this.activityWorkList()
		},
		methods: {
			cut(type) {
				this.type = type
				this.page = 1
				this.List = []
				if (type == 1) {
					this.activityWorkList()
				} else if (type == 2) {
					this.activitySendList()
				} else if (type == 3) {
					this.activityWorkTop()
				}
			},
			// 活动作品列表
			async activityWorkList() {
				if (this.retrench) return
				this.retrench = true
				let res = await this.$http("api/work/activityWorkList", {
					id: this.id, //true	int		活动id
					page: this.page, //true	int		当前页
					size: 10, //true	int		每页多少条
				})
				if (res.code == 200) {
					this.List = this.List.concat(res.result.data)
					this.total = res.result.total
				}
				this.retrench = false
			},
			// 活动送花列表
			async activitySendList() {
				if (this.retrench) return
				this.retrench = true
				let res = await this.$http("api/work/activitySendList", {
					id: this.id, //true	int		活动id
					page: this.page, //true	int		当前页
					size: 10, //true	int		每页多少条
				})
				if (res.code == 200) {
					this.List = this.List.concat(res.result.data)
					this.total = res.result.total
				}
				this.retrench = false
			},
			// 活动作品榜
			async activityWorkTop() {
				if (this.retrench) return
				this.retrench = true
				let res = await this.$http("api/work/activityWorkTop", {
					id: this.id, //true	int		活动id
					page: this.page, //true	int		当前页
					size: 10, //true	int		每页多少条
				})
				if (res.code == 200) {
					this.List = this.List.concat(res.result.data)
					this.total = res.result.total
				}
				this.retrench = false
			},
			// 判断活动是否结束
			checkTime(start_time, end_time) {
				const currentTime = new Date(); // 获取当前时间
				const startTime = new Date(start_time); // 将开始时间转换为Date对象
				const endTime = new Date(end_time); // 将结束时间转换为Date对象

				// 比较当前时间与结束时间
				if (currentTime >= endTime) {
					this.isTimeUp = true;
					this.tis = '已到达结束时间'
				} else if (currentTime < startTime) {
					this.isTimeUp = true;
					this.tis = '未到达开始时间'
				} else {
					this.isTimeUp = false;
					console.log('活动进行中');
				}
			},
			// 前往详情页面
			async goTo(data) {
				// console.log(data);
				let res = await this.$http("api/work/getWorkInfo", {
					id: data.id
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					if (res.result.is_unlock) {
						this.navigateTo(`/pages/index/content?id=${res.result.id}`)
					} else {
						this.navigateTo(`/pages/index/unlock?id=${res.result.id}`)
					}
				}
			},
			//活动详情
			returnTime(time) {
				// let date = new Date(time);
				// return `${String(date.getMonth()+1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
				return time.substr(0, 10)
			},
			switchTab(index) { // 切换标签
				this.tabIndex = index;
			},
			goPage() { // 立即参与
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
					})
					return
				}
				if (this.isTimeUp) {
					uni.showToast({
						title: this.tis,
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/works/addWorks?activity_id=${this.id}`
				})
			},
			async activityInfo(id) {
				let res = await this.$http("api/work/activityInfo", {
					id
				}, "GET")
				if (res.code == 200) {
					this.checkTime(res.result.start_time, res.result.end_time)
					res.result.startTime = this.returnTime(res.result.start_time);
					res.result.endTime = this.returnTime(res.result.end_time);
					res.result.desc = res.result.desc.replace(/&nbsp;/g, '\u00A0');
					if (/(<img[^>]*\sstyle=")[^"]*(")/gi.test(res.result.desc)) {
						res.result.desc = res.result.desc.replace(/(<img[^>]*\sstyle=")[^"]*(")/gi,
							'$1max-width:100%;height:auto;$2');
					} else {
						res.result.desc = res.result.desc.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto"');
					}
					res.result.platform_desc = res.result.platform_desc.replace(/&nbsp;/g, '\u00A0');
					if (/(<img[^>]*\sstyle=")[^"]*(")/gi.test(res.result.platform_desc)) {
						res.result.platform_desc = res.result.platform_desc.replace(/(<img[^>]*\sstyle=")[^"]*(")/gi,
							'$1max-width:100%;height:auto;$2');
					} else {
						res.result.platform_desc = res.result.platform_desc.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto"');
					}
					res.result.rule_desc = res.result.rule_desc.replace(/&nbsp;/g, '\u00A0');
					if (/(<img[^>]*\sstyle=")[^"]*(")/gi.test(res.result.rule_desc)) {
						res.result.rule_desc = res.result.rule_desc.replace(/(<img[^>]*\sstyle=")[^"]*(")/gi,
							'$1max-width:100%;height:auto;$2');
					} else {
						res.result.rule_desc = res.result.rule_desc.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto"');
					}

					this.info = res.result;
				}
			}
		},
		onReachBottom() {
			if (this.List.length >= this.total || this.retrench) return
			this.page += 1
			if (this.type == 1) {
				this.activityWorkList()
			} else if (this.type == 2) {
				this.activitySendList()
			} else if (this.type == 3) {
				this.activityWorkTop()
			}
		}
	}
</script>

<style scoped lang="scss">
	.activityInfo {
		// background: #F64231;
		min-height: 100vh;
		overflow: hidden;
		padding-bottom: 68rpx;
		box-sizing: border-box;

		.notice {
			display: flex;
			align-items: center;
			position: fixed;
			// #ifndef H5
			top: 0;
			// #endif
			// #ifdef H5
			top: 80rpx;
			// #endif
			left: 0;
			width: 100%;
			z-index: 999;
			background-color: rgba(255, 255, 255, 0.5);

			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 16rpx;
			}

			::v-deep .u-notice-bar {
				flex: 1;
				.u-notice__left-icon {
					display: none;
				}
			}
		}

		.banner {
			width: 100%;
		}

		.main {
			width: 686rpx;
			// height: 3044rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 28rpx;
			margin: -170rpx auto 0;
			position: relative;
			z-index: 100;
			padding: 40rpx 0 160rpx;
			box-sizing: border-box;

			.title {
				font-weight: 800;
				font-size: 36rpx;
				color: #333333;
				letter-spacing: 2rpx;
				padding: 0 32rpx;
			}

			.data {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 32rpx;

				.item {
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;

					text {
						color: #FF504A;
						padding-right: 4rpx;
					}
				}
			}

			.info {
				width: 638rpx;
				background: #FFF8ED;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				padding: 40rpx 40rpx 8rpx;
				margin: auto;
				box-sizing: border-box;

				.item {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					padding-bottom: 32rpx;
					letter-spacing: 2rpx;

					.right {
						// width: 314rpx;
						flex: 1;
						height: 8rpx;
						border-radius: 10rpx;
						position: relative;
						margin-left: 16rpx;
						// background: rgba(255, 255, 225, 0.35);
						overflow: hidden;
						background-color: #FFFFFF;

						.line {
							position: absolute;
							left: 0;
							top: 0;
							background: #EC2C1B;
							height: 100%;
						}
					}
				}

				.reward_rank {
					.value {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						letter-spacing: 2rpx;
					}
				}
			}

			.box {
				padding: 32rpx 0;

				.box-title {
					width: 128rpx;
					height: 48rpx;
					background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/titBack.png") no-repeat;
					background-size: 100% 100%;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					margin: 0 0 32rpx 32rpx;
				}

				.box-title1 {
					display: flex;
					align-items: center;
					margin: 32rpx;

					view {
						width: 200rpx;
						height: 48rpx;
						background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/titBack.png") no-repeat;
						background-size: 100% 100%;
						font-weight: bold;
						font-size: 32rpx;
						color: #000000;
					}

					text {
						font-weight: 500;
						font-size: 20rpx;
						color: #8D8F90;
						padding: 0 15rpx;
					}
				}

				.content {
					padding: 0 32rpx;

					.name {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						line-height: 48rpx;
					}

					.text {
						font-size: 28rpx;
						line-height: 42rpx;
					}
				}

				.bottomLIst {
					.nav {
						display: flex;
						align-items: center;
						justify-content: space-around;
						padding: 0 20rpx 40rpx;

						.item {
							font-weight: 500;
							font-size: 28rpx;
							color: #8D8F90;
						}

						.xz {
							position: relative;
							font-weight: 800;
							font-size: 28rpx;
							color: #333333;

							text {
								display: block;
								position: absolute;
								bottom: -10rpx;
								left: 50%;
								transform: translateX(-50%);
								width: 40rpx;
								height: 8rpx;
								border-radius: 4rpx;
								background-color: #ff504a;
							}
						}
					}

					.videoList {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-column-gap: 26rpx;
						grid-row-gap: 26rpx;
						padding: 0 32rpx;

						.item {
							width: 300rpx;
							// height: 456rpx;
							background: #FFFFFF;
							box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							padding: 8rpx;
							box-sizing: border-box;

							.picture {
								display: block;
								width: 100%;
								height: 392rpx;
								background-color: #000;
								border-radius: 16rpx;
							}

							.msg {
								display: flex;
								align-items: center;
								justify-content: space-between;
								padding: 12rpx 0;

								.left {
									display: flex;
									align-items: center;

									image {
										width: 32rpx;
										height: 32rpx;
										border-radius: 50%;
									}

									text {
										font-weight: bold;
										font-size: 20rpx;
										color: #8D8F90;
										padding-left: 4rpx;
									}
								}

								.right {
									display: flex;
									align-items: center;

									image {
										width: 24rpx;
										height: 24rpx;
									}

									text {
										font-weight: bold;
										font-size: 20rpx;
										color: #8D8F90;
										padding-left: 8rpx;
									}
								}
							}
						}
					}

					.userList {
						.item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;
							height: 104rpx;
							// background: linear-gradient( 270deg, rgba(255,236,202,0) 0%, rgba(255,238,208,0) 69%, #FFF4E0 100%);
							border-bottom: 2rpx solid #fafafa;
							box-sizing: border-box;
							padding: 0 36rpx;

							.left {
								display: flex;
								align-items: center;

								.index {
									width: 90rpx;
									font-weight: 800;
									font-size: 36rpx;
									color: #8D8F90;
								}

								.user {
									display: flex;
									align-items: center;

									image {
										width: 68rpx;
										height: 68rpx;
										border-radius: 50%;
									}

									text {
										width: 340rpx;
										font-weight: bold;
										font-size: 24rpx;
										color: #333333;
										padding: 0 32rpx;
										box-sizing: border-box;

									}
								}
							}

							.hua {
								display: flex;
								align-items: center;

								image {
									width: 40rpx;
									height: 40rpx;
								}

								text {
									text-align: center;
									width: 70rpx;
									font-weight: bold;
									font-size: 24rpx;
									color: #333333;
									padding-left: 10rpx;
									box-sizing: border-box;
								}
							}
						}

						.one {
							background: linear-gradient(270deg, rgba(255, 236, 202, 0) 0%, rgba(255, 238, 208, 0) 69%, #FFF4E0 100%);

							.left {
								.index {
									width: 90rpx;
									font-weight: bold;
									font-size: 60rpx;
									color: #DF8F01;
								}
							}
						}

						.two {
							background: linear-gradient(270deg, rgba(224, 242, 255, 0) 0%, rgba(224, 242, 255, 0) 69%, #E0F2FF 100%);

							.left {
								.index {
									width: 90rpx;
									font-weight: bold;
									font-size: 60rpx;
									color: #018ADF;
								}
							}
						}

						.three {
							background: linear-gradient(270deg, rgba(255, 231, 224, 0) 0%, rgba(255, 231, 224, 0) 69%, #FFE7E0 100%);

							.left {
								.index {
									width: 90rpx;
									font-weight: bold;
									font-size: 60rpx;
									color: #DF2201;
								}
							}
						}
					}
				}
			}
		}

		.activityBtn {
			width: 342rpx;
			height: 134rpx;
			background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/activity_btn.png);
			background-size: 100% 100%;
			position: fixed;
			left: 50%;
			bottom: 68rpx;
			transform: translateX(-50%);
			z-index: 101;
		}

		.activityBtn2 {
			width: 342rpx;
			height: 134rpx;
			background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/activity_btn2.png);
			background-size: 100% 100%;
			position: fixed;
			left: 50%;
			bottom: 68rpx;
			transform: translateX(-50%);
			z-index: 101;
		}
	}
</style>